<template> 
<view class="laydata-wrap"> 
	<view class="hd">
		<view class="handle-ctrl">
			<view class="prev iconfont f-s26" @click="handlePrevMonth">&#xe650;</view>
			<view class="content">{{calenDate.year}}年{{calenDate.month}}月</view>
			<view class="next iconfont f-s26" @click="handleNextMonth">&#xe653;</view>
		</view>
		<view class="btn-wrap">
			<view class="btn-clear" @click="clearDate">清空</view>
			<view class="btn-close" @click="closeDate">取消</view>
		</view> 
	</view>
	<view class="day-header">
		<view class="item f-red">日</view>
		<view class="item">一</view>
		<view class="item">二</view>
		<view class="item">三</view>
		<view class="item">四</view>
		<view class="item">五</view>
		<view class="item f-red">六</view>
	</view>
	<view class="month-area" :style="{'padding-bottom':isIphoneX?'50rpx':0}"> 
		<view :class="['item',{'active-day':calenDate.month==item.month}]" v-for='(item,index) in calenDate.days' :key="index" @click="selectDay(item.date,index)">
			<view v-if="isCurrentDay(item.date)" class="current-icon">·</view>
			<view>{{item.day}}</view>
			<view class="label"></view>  
		</view>	
	</view>
</view>
</template>

<script>
export default{
	name:'laydata',
	data(){
		return {
			isIphoneX:getApp().globalData.isIphoneX,
			isHideDate:false,
			currentYear:'',
			currentMonth:'',
			currentDay:'',
			selectDate:'',   
			calenDate:{
				year:'',
				month:'',
				day:'', 
				days:[],
				content:''
			}
		}
	},
	props:{
		type:{
			type:String    // 1 开始日期  2 结束日期
		} 
	},
	async onReady() {     
		this.getCurrenDate(); 	 
		this.getDates(this.currentYear,this.currentMonth,this.currentDay); 
	},
	methods:{
		  
		
		// 关闭日期组件
		closeDate:function(){ 
			this.$emit("closeDate",this.isHideDate);
		},
		// 清空选中日期
		clearDate:function(){ 
			this.$emit("clearDate",this.type);
		},
	 
		// 获取当前年月日
		getCurrenDate:function(){
			let date=new Date();
			this.currentYear = date.getFullYear();   // 当前年 2020
			this.currentMonth = date.getMonth()+1;   // 当前月 2
			this.currentDay = date.getDate();       // 当前日 27 
		},
		
		// 日历生成主逻辑
		getDates:function(year,month,day){
			month=month-1;   //  处理月份0开始
			let calendatArr=[];
			let date=new Date();  
			let day_date={};
			let state_msg='';
			
			// 获取当前月1号  当前2020-2-1
			let firstDay=new Date(year,month,1);	 
			
			// 获取当前月1号是周几  当前周六，
			let firstWeekDay = firstDay.getDay();
			
			// 计算开始时间戳  2-1日时间戳-6天前时间戳 即2月1日前6天
			let startTime = firstDay - firstWeekDay* 24 * 60 * 60 * 1000;
  
			
			// 日历日期包含数据		
			for (let i=0; i<42; i++) { 				 
				calendatArr.push({  
					date: new Date(startTime + i * 24 * 60 * 60 * 1000),
					day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
					year:new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear()+'',
					month:new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth()+1 				
				})
			};
			
						
			this.calenDate.year=year;
			this.calenDate.month=month+1;
			this.calenDate.day=day;
			this.calenDate.days=calendatArr;   
		},
		
		// 是否当前日期
		isCurrentDay:function(date){
			let year = date.getFullYear();
			let month = date.getMonth()+1;
			let day=date.getDate(); 
			if(year==this.currentYear&&month==this.currentMonth&&day==this.currentDay){
				return true
			}else{
				return false
			}
		},
		
		// 上月
		handlePrevMonth:function() {  			
			if(this.calenDate.month<=1){
				this.calenDate.year=this.calenDate.year-1
				this.calenDate.month=12
			}else{
				this.calenDate.month--
			}
			this.getDates(this.calenDate.year,this.calenDate.month,1) 
		},
		// 下月
		handleNextMonth:function() {
			if(this.calenDate.month>=12){
				this.calenDate.year=parseInt(this.calenDate.year)+1
				this.calenDate.month=1
			}else{
				this.calenDate.month++
			}
			this.getDates(this.calenDate.year,this.calenDate.month,1);  
		},
		
		selectDay:function(date,index){   
			let data={};
			let year=date.getFullYear();
			let month=date.getMonth()+1;
			let day=date.getDate(); 
			this.calenDate.days[index].isCheck=0;  
			if(month<10){
				month='0'+month;
			}
			if(day<10){
				day='0'+day;
			}
			this.selectDate=year+'-'+month+'-'+day; 
			data={
				type:this.type,
				date:this.selectDate
			}
			this.$emit("selectDate",data);   // 父组件传递日期 
		}
	},
	computed:{ 
	}
}
</script>

<style lang="less"> 
.laydata-wrap{
	position:fixed;
	bottom:0;
	left: 0;
	width:100%; 
	background: #fff;
	.close-btn{
		position:absolute;
		right:0;
		top:0;
		width:80rpx;
		height:80rpx;
		text-align: center;
		line-height: 80rpx;
		color:#666;
	}
	.clear-day{
		position:absolute;
		left:0;
		top:0;
		padding:0 8rpx;
		height:50rpx;
		text-align: center;
		line-height: 50rpx;
		background:#ff9600;
		border-radius:8rpx;
		color:#fff;
	}
	.hd{
		height:90rpx; 
		display: flex; 
		background: #fff; 
		justify-content:space-between;
		align-items: center;
		.handle-ctrl{
			display:flex;
			align-items:center;
		}
		.btn-wrap{
			display:flex;
			align-items:center;
			margin-right:20rpx;
			.btn-clear,.btn-close{
				height:50rpx;
				line-height:50rpx;
				padding:0 20rpx;
				border:2rpx solid #eee;
				color:#09f;
				font-size:24rpx;
			}
		}
		.iconfont{
			width:90rpx;
			height:90rpx;
			text-align: center;
			line-height: 90rpx;
			color:#666;
		}
		.content{
			margin:0 20rpx;
			font-size:28rpx;
			color:#666;
		} 
	}
}
  
.day-header{
	display: flex;	
	height:80rpx; 
	background: #f8f8f8;
	justify-content: space-around;
	align-items: center;
	font-size:28rpx;
	color:#666;
}
.day-header .item,
.month-area .item{
	width:14%;  
	text-align: center;	
	
}
.month-area{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	background: #f8f8f8;
	font-size:28rpx;
	color:#666;
	.item{
		position:relative;
		height:72rpx;
		padding-top:8rpx;
		border-top: 1rpx solid #f5f5f5;	
		background: #f8f8f8;
		color:#ccc;
		.current-icon{
			position: absolute;
			right:5rpx;
			top:5rpx;
			height:10rpx;
			line-height: 10rpx;
			font-size:48rpx;
			color:#333; 
		}
		.label{
			font-size:20rpx;
		}
		.current-day{
			background: #00C785;
		}
	}
	.current-label{
		background: #ffd9c2; 
		color:#ff5500;
	}
	.active-day{
		color:#666;
		background: #ffffff;
		.label{
			color:#f00; 
		}
	}
	.select-day{
		background: #ffd9c2;
		color:#ff5500;
	} 
	.check-day{
		background: #09f;
		color:#fff;
		.label{
			color:#fff; 
		}
	}
}
 
</style>
